﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Drawing Tools Sample</title>

    <!-- Bing Map Control references -->
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <!-- Our Bing Maps JavaScript Code -->
    <link href="js/DrawingToolsModule/DrawingToolsModule.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var map, drawingTools, infoLayer;

        function GetMap() {
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
                credentials: "YOUR_BING_MAPS_KEY",
                zoom: 2
            });

            //Register and load the Drawing Tools Module
            Microsoft.Maps.registerModule("DrawingToolsModule", "js/DrawingToolsModule/DrawingToolsModule.js");

            Microsoft.Maps.loadModule("DrawingToolsModule", {
                callback: function () {
                    //Create an instance of the drawing tools.
                    drawingTools = new DrawingTools.DrawingManager(map, {
                        toolbarContainer: document.getElementById('toolbarContainer'),
                        toolbarOptions: {
                            //Only show a few of the drawing modes and none of the style tools.
                            drawingModes: ['polyline', 'polygon', 'circle', 'rectangle', 'erase', 'edit'],
                            styleTools: []
                        },
                        events: {
                            drawingEnded: function (s) {
                                showMeasurements(s);
                            },
                            drawingChanging: function (s) {
                                showMeasurements(s);
                            },
                            drawingChanged: function (s) {
                                showMeasurements(s);
                            },
                            drawingErased: function (s) {
                                infoLayer.clear();
                            }
                        }
                    });

                    //Create a layer for rendering distance info on.
                    infoLayer = new Microsoft.Maps.EntityCollection();
                    map.entities.push(infoLayer);
                }
            });
        }

        function showMeasurements(shape) {
            infoLayer.clear();

            if (shape.ShapeInfo && shape.ShapeInfo.type != DrawingTools.DrawingMode.pushpin) {
                var pin, loc;

                if (shape.ShapeInfo.type == DrawingTools.DrawingMode.circle) {
                    //For circles show the radius distance at the center of the circle.
                    pin = new Microsoft.Maps.Pushpin(shape.ShapeInfo.center, {
                        htmlContent: '<span style="color:orange;">' + Math.round(shape.ShapeInfo.radius) + ' km</span>',
                        width: 75,
                        height: 20
                    });
                    infoLayer.push(pin);
                } else {
                    var locs = shape.getLocations();
                    var segmentLenth, totalLength = 0;

                    //Show the length of each line segment of a shape.
                    for (var i = 0; i < locs.length - 1; i++) {
                        segmentLenth = DrawingTools.MapMath.haversineDistance(locs[i], locs[i + 1], DrawingTools.DistanceUnit.km);
                        totalLength += segmentLenth;

                        loc = drawingTools.calculateVisualMidpoint(locs[i], locs[i + 1]);

                        pin = new Microsoft.Maps.Pushpin(loc, {
                            htmlContent: '<span style="color:red;">' + Math.round(segmentLenth) + ' km</span>',
                            width: 75,
                            height: 20
                        });
                        infoLayer.push(pin);
                    }

                    //Show the total perimeter distance.
                    pin = new Microsoft.Maps.Pushpin(locs[locs.length - 1], {
                        htmlContent: '<span style="color:orange;">' + Math.round(totalLength) + ' km</span>',
                        width: 75,
                        height: 20
                    });
                    infoLayer.push(pin);
                }
            }
        }
    </script>
</head>
<body onload="GetMap()">
    <div style="position:relative;width:800px;height:600px;float:left;">
        <div id="myMap" style="position:relative;width:800px;height:600px;"></div>
        <div id="toolbarContainer" style="position:absolute;right:5px;top:5px;width:70px;"></div>
    </div>
    <fieldset style="width:600px;float:left;margin-left:10px;">
        <legend>Event Example</legend>
        This code sample demonstrates how to make use of events in the DrawingTools module. 
        It also makes use of the MapMath tools in the module to calculate the the distances between locations.
    </fieldset>
</body>
</html>